<template>
	<el-form :inline="true" :model="formInline">
		<el-form-item label="用户名">
			<el-input v-model="formInline.user" placeholder="请输入用户名" />
		</el-form-item>
		<el-form-item label="地址">
			<el-select v-model="formInline.region" placeholder="请选择地址">
				<el-option label="上海" value="上海" />
				<el-option label="北京" value="上海" />
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit">查询</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData"
		height="600" 
		border
		stripe 
		style="width: 100%">
		<el-table-column label="操作" width="150" align="center">
			<template #default="scope">
				<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
				<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
		<el-table-column prop="date" label="Date" width="180" />
		<el-table-column prop="name" label="Name" width="180" />
		<el-table-column prop="address" label="Address" />
  	</el-table>
</template>

<script setup>
import {  reactive } from "vue";

const formInline = reactive({
	user: '',
	region: '',
})

const onSubmit = () => {
	console.log('submit!')
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];


const handleEdit=(index,row)=>{


}
const handleDelete=(index,row)=>{


}

</script>

<style>

</style>